<template>
	<view>
		<view class="search_input" v-if="search_friend">
			<view>
				<icon type="search" size="13"></icon>
				<input placeholder="搜索" placeholder-style="color:#CFCFCF;line-height:20px;font-size:12px;"></input>
			</view>
			<text @tap="cancel">取消</text>
		</view>
		<view class='nav_bar_chat'>
			<!-- 群推荐和我的群 -->
			<radio-group>
				<view class="weui-navbar">
				  <block v-for="(item,index) in tabs_radio" >
					<view class="header-tab weui-navbar__item" :class="activeIndex == index ? 'weui-bar__item_on' : ''" :id="index" @tap="tabClick">
					  <view :checked="item.checked" :value="item.name" class="weui-navbar__title radio_title">{{item.value}}</view>
					</view>
				  </block>
				  <view class="weui-navbar__slider" :style="'left: 0px;transform: translateX('+sliderOffset+'px);-webkit-transform:translateX('+sliderOffset+'px);'"></view>
				</view>
			</radio-group>
		</view>
		
		<view class="contain" v-if="theBar==0">
			<!-- 群筛选 -->
			<!-- <block v-for="(item,index) in shai_radio" >
				<view class="header-shai-tab weui-navbar__item shai_view" :id="item.id" @tap="tabShaiClick">
					 <view :checked="item.checked" :value="item.name" class="weui-navbar__title radio_title">
					 {{item.value?item.value:'区域选择'}}
					<image src='/static/images/triangle-000.png'></image>
					</view>
				</view>
			</block> -->
			<block >
				<view class="header-shai-tab weui-navbar__item shai_view"  data-id="1" @tap="tabShaiClick">
					 <view :value="item.name" class="weui-navbar__title radio_title">
					 {{quyuRes?quyuRes:'区域筛选'}}
					<image src='/static/images/triangle-000.png'></image>
					</view>
				</view>
				<view class="header-shai-tab weui-navbar__item shai_view"  data-id="2" @tap="tabShaiClick">
					 <view :value="item.name" class="weui-navbar__title radio_title">
					 {{tiaojianRes?tiaojianRes:'条件筛选'}}
					<image src='/static/images/triangle-000.png'></image>
					</view>
				</view>
			</block>

			<!-- 
			<view class="build_group" @tap="build_group">
				<image src="/static/huanxin/images/chat-list.png"></image>
				<text>新建群聊</text>
			</view> -->
			<!-- 所有的群 -->
			<view v-for="item in groupListAll" class="groupList" :key="item.tid" :data-username="item.groupname" :data-roomid="item.tid" @tap="into_room">
				<view class="info" >
					<image src="/static/huanxin/images/groupTheme.png"  :data-username="item.groupname"></image>
				</view>
				
				<view class='right_group_box'>
					<view class="nbr_body">
						<view :data-username="item.groupname" class='column-h'>{{item.groupname}}</view>
						<view :data-username="item.groupname" class='column-h'>
							<view>{{item.aff_length}}人</view>
							<view>{{item.groupsName.typename}}</view>
						</view>
					</view>
					<view class="edit" >
						申请加入
						<!-- <image src="/static/huanxin/images/cell_groups.png"  :data-username="item.name"></image> -->
					<!-- 	<view class='btn_blue'></view>
						 </view> -->
					</view>
				</view>
			</view>
		<!-- 	插件的条 -->
			<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
			 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray" ></mpvue-picker>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onCancel="onCancel" @onConfirm="onConfirm" ></mpvue-city-picker>
		</view>
		
		
			<view class="contain-two" v-if="theBar==1" >
				<!-- 
				<view class="build_group" @tap="build_group">
					<image src="/static/huanxin/images/chat-list.png"></image>
					<text>新建群聊</text>
				</view> -->
				<!-- 群聊列表 -->
				<view v-for="item in groupList" class="groupList" :key="item.tid">
					<view class="info" @tap="into_room">
						<image src="/static/huanxin/images/groupTheme.png"  :data-username="item.groupname"></image>
					</view>
					
					<view class='right_group_box'>
						<view class="nbr_body" :data-username="item.groupname" :data-roomid="item.tid" @tap="into_room">
							<view :data-username="item.groupname" class='column-h'>{{ item.groupname }}</view>
							<view :data-username="item.groupname" class='column-h person_text'>{{ item.groupname }}</view>
						</view>
						<view class="edit" @tap="into_room" :data-username="item.groupname" :data-roomid="item.tid">
							申请加入
						</view>
					</view>
				</view>
				
				<!-- 最开始的我要建群-》底部的新的按钮 -->
				<!-- <view class='center_bar'  @tap="build_group">
					 <button id='3' class='submit-btn' hover-class formType="submit">我要建群</button>
				</view> -->
				
				<view class='center_bar'  @tap="build_group_chat">
					 <button id='3' class='submit-btn' hover-class formType="submit">我要建群</button>
				</view>
				
			</view>
	</view>
</template>

<script>
	/*引入环信*/
	let disp = require("@/utils/broadcast");
	/*引入地区筛选*/
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '@/common/city.data.js';
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js';
	let test_account, test_psword; //测试用账号密码
	export default {
		components: {
			/*地区组件开始*/
			mpvuePicker,
			mpvueCityPicker
			/*地区组件结束*/
		},
		data() {
			return {
				/*环信的群成员*/
				groupMember:[],
				/*区域筛选的文字*/
				quyuRes:'',
				/*条件筛选的文字*/
				tiaojianRes:'',
				/*区域筛选的id号*/
				quyuId:'',
				/*条件筛选的id号*/
				tiaojianId:'',
				/*本身的开始*/
				confirm_type:0, //选中的type的初始值
				sliderOffset: 50,  //设置位置,
				tabs_radio: [
				  { name: '群推荐', value: '群推荐', checked: 'ture' },
				  { name: '我的群', value: '我的群' },
				],  //群聊文字
				shai_radio: [
				  { name: '区域选择', value: '区域选择', checked: 'ture',id:1 },
				  { name: '条件筛选', value: '条件筛选',id:2},
				],  //群聊文字
				theBar:0,  //当前的条的数字
				theShaiBar:0,  //当前的条的数字
				/*筛选*/
				activeIndex: 0, /*位置选中*/
				/*本身的结束*/
				/*地区插件的开始*/
				title : "mpvue-picker 使用示例",
				pickerSingleArray: [
					// {
					// 	label: '中国',
					// 	value: 1
					// },
					// {
					// 	label: '俄罗斯',
					// 	value: 2
					// },
					// {
					// 	label: '美国',
					// 	value: 3
					// },
					// {
					// 	label: '日本',
					// 	value: 4
					// }
				],
				// pickerSingleArrayWorker: [{
				// 		label: '建材商家',
				// 		value: 1
				// 	},
				// ],
				pickerSingleArrayWorker:[],
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[],
				/*地区插件的结束*/
				/*环信的开始*/
				search_btn: true,
				search_friend: false,
				show_mask: false,
				/*我的群*/
				groupList: [{
					// jid:'1100190906107692#uni-huanxin-im_98279324975105@conference.easemob.com',
					// name:'几句',
					// roomId:'98279324975105'
				}],		
				// 所有的群
				groupListAll: [{
					// jid:'1100190906107692#uni-huanxin-im_98279324975105@conference.easemob.com',
					// name:'几句所有',
					// roomId:'98279324975105'
				}],
				myName: "",
				/*环信的结束*/
				system_height:'',
				grant_type:'password',
			
			}
		},
		/*区域选择开始*/
			onUnload() {
				if (this.$refs.mpvuePicker.showPicker) {
					this.$refs.mpvuePicker.pickerCancel()
				}
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel()
				}
			},
			/*区域选择结束*/
		onLoad(options) {
		
			/*每次进来登录的操作*/
			let userInfo = app.globalData.userInfo;
			console.log('userInfo的值',userInfo);
			let that=this;
			console.log('this.userInfo.hx_nickName',userInfo.hx_username)
			this.$conn.open({
				apiUrl: that.$im.config.apiURL,
				user: test_account || userInfo.hx_nickName.toLowerCase(),
				pwd: test_psword || userInfo.hx_password,
				grant_type: that.grant_type,
				appKey: that.$im.config.appkey
			});
			/*所有的群*/
			this.listGroupsAll();
			/*我的群*/
			this.listGroups();
			/*得到当前高度开始*/
			// let this=that;
			// uni.getSystemInfo({
			// 	success: function(res) {
			// 		// #ifdef MP-WEIXIN
			// 		that.system_height = 2 * res.screenHeight + 'rpx';
			// 		// #endif
			// 		// #ifdef APP-PLUS
			// 		that.system_height = 2 * res.screenHeight + 'upx';
			// 		// #endif
			
			// 	}
			// })
			/*得到当前高度结束*/
			let me = this;
			// me.myName = uni.getStorageSync("myUsername");
			disp.on("em.xmpp.invite.joingroup", function(){
				var pageStack = getCurrentPages();
				// 判断是否当前路由是本页
				if(pageStack[pageStack.length - 1].route === me.route){
					me.listGroups();
				}
			});
			
			disp.on("em.xmpp.invite.deleteGroup", function(){
				var pageStack = getCurrentPages();
				// 判断是否当前路由是本页
				if(pageStack[pageStack.length - 1].route === me.route){
					me.listGroups();
				}
			});
			
			this.myName = options.myName;
		},
		onShow() {
			/*每次进来卸载confirm_type的值*/
			this.confirm_type=0;
			this.quyuRes='';
			this.tiaojianRes='';
		},
		methods: {
			/*获取当前群的成员*/
			getGroupMember(id){
				console.log('进来获取群成员');
				var me = this;
				// 获取群成员
				var pageNum = 1,
					pageSize = 1000;
				var options = {
					pageNum: pageNum,
					pageSize: pageSize,
					groupId: id,
					success: function(resp){
						if(resp && resp.data && resp.data.data){
							console.log('进来获取群成员的值',resp.data.data);
							me.groupMember = resp.data.data
						}
						console.log(me.groupMember);
					},
					error: function(err){
			
					}
				};
				this.$im.conn.listGroupMember(options);
			},
			/*区域选择方法开始*/
			onCancel(e) {
				// console.log('e的值',e);
				// let id= e.currentTarget.id;
				// if(id==1){
				// 	console.log('进行了筛选取消1',e);
				// }else if(id==2){
				// 	console.log('进行了筛选取消2',e);
				// }
			
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e);
				let that=this;
				console.log('e的值',e);
				let label=e.label;
				let type=0;
				let pickerSingleArray=this.pickerSingleArray;
				let pickerSingleArrayWorker=this.pickerSingleArrayWorker;
				for(var i=0;i<pickerSingleArray.length;i++){
					if(pickerSingleArray[i]['label']==label){
						type=1;
						this.quyuRes=label;
						this.quyuId=e.value[0];
					}
				}
				for(var i=0;i<pickerSingleArrayWorker.length;i++){
					if(pickerSingleArrayWorker[i]['label']==label){
						type=2;
						this.tiaojianRes=label;
						this.tiaojianId=e.value[0];
					}
				}
				this.confirm_type=type;
				console.log('quyuId',this.quyuId);
				console.log('tiaojianId',this.tiaojianId);
				gyzjModel.prototype.getGroupsShai(this.quyuId,this.tiaojianId).then(res=>{
					console.log('筛选的res的值',res);
					that.groupListAll=res.data.data;
					console.log('得到的res的值',res);
				})
			},
			onBackPress() {
			  if (this.$refs.mpvuePicker.showPicker) {
			  	this.$refs.mpvuePicker.pickerCancel();
			    return true;
			  }
			  if (this.$refs.mpvueCityPicker.showPicker) {
			  	this.$refs.mpvueCityPicker.pickerCancel();
			    return true;
			  }
			},
			/*区域选择方法结束*/
			/*环信的开始*/
			/*我的群*/
			listGroups(){
				var me = this;
				//注释环信的调用
				// 	this.$im.conn.listRooms({
				// 		success: function(rooms){
				// 			console.log('rooms的值',rooms);
				// 			me.groupList = rooms;
				// 			getApp().globalData.groupList = rooms || [];
				// 		},
				// 		error: function(){
				// 		}
				// 	});
				var arr=this.main_getGlobal();
				gyzjModel.prototype.getMyGroups(arr.token,arr.type).then(data=>{
					me.groupList=data.data.data;
				})
			},
			/*所有的群*/
			listGroupsAll(){
				var me = this;
				gyzjModel.prototype.getGroupsShai(0,0).then(data=>{
					me.groupListAll=data.data.data;
				})
			},
			openSearch(){
				this.search_btn = false
				this.search_friend = true
				this.show_mask = true
			},
			
			cancel(){
				this.search_btn = true
				this.search_friend = false
				this.show_mask = false
			},
			
			close_mask(){
				this.search_btn = true
				this.search_friend = false
				this.show_mask = false
			},
			build_group_chat(){
				uni.navigateTo({
					url: "../chat/chat"
				});
			},
			
			build_group(){
				var me = this;
				/*我的环信昵称传递过去*/
				// var nameList = {
				// 	myName: uni.getStorageSync("myUsername"),
				// };
				/*之前的环信传值*/
				var nameList = {
					myName: app.globalData.userInfo.hx_username,
				};
				
				console.log('nameList的值',nameList);
				uni.navigateTo({
					url: "../add_groups/add_groups?owner=" + JSON.stringify(nameList)
				});
				// /*进入申请加群页面*/
				// /*进来设置用户名*/

				// uni.navigateTo({
				// 	url: "../add_groups/add_groups?add=" + JSON.stringify(nameList)
				// });
			},
			/*点击链接进入聊天*/
			into_room(event){
				let me=this,friendAttr = [],flagRes,options,groupMemberAll;
				var nameList = {
					myName: uni.getStorageSync("myUsername"),
					your: event.currentTarget.dataset.username,
					groupId: event.currentTarget.dataset.roomid
				};
				/*聊天之前判断设置成员*/
				// var me = this;
				// 获取群成员
				var pageNum = 1,
					pageSize = 1000;
				var option = {
					pageNum: pageNum,
					pageSize: pageSize,
					groupId: nameList.groupId,
					success: function(resp){
						if(resp && resp.data && resp.data.data){
							console.log('进来获取群成员的值',resp.data.data);
							groupMemberAll = resp.data.data;
							me.getGroupMember(event.currentTarget.dataset.roomid);
							console.log('之前的groupMember',groupMemberAll)
							if(groupMemberAll){
								friendAttr.push(nameList.myName);
								console.log('friendAttr的值',friendAttr);
								console.log('groupMemberAll的值',groupMemberAll);
							    flagRes=gyzjModel.prototype.isExistGroup(friendAttr, groupMemberAll);
								console.log('flagRes的值',flagRes);
								if(flagRes){
									uni.navigateTo({
										url: "../groupChatRoom/groupChatRoom?username="+JSON.stringify(nameList)
									});
								}else{
									options = {
										list: friendAttr,
										roomId: nameList.groupId,
									}
									console.log('options的值',JSON.stringify(options));
									
									uni.navigateTo({
										url: "../add_groups/apply_groups/apply_groups?addOptions="+JSON.stringify(options)
									});
								}
								
							}
							
						}
					},
					error: function(err){
							
					}
				};
				this.$im.conn.listGroupMember(option);
			},
			/*修改房间*/
			edit_group(event){
				var nameList = {
					myName: this.myName,
					groupName: event.currentTarget.dataset.username,
					roomId: event.currentTarget.dataset.roomid
				};
				/*跳转到群聊天*/
				uni.navigateTo({
					url: "../groupChatRoom/groupChatRoom?username=" + JSON.stringify(nameList)
				});
			},
			/*环信的结束*/
			/*切换tabbar*/
			 tabClick: function (e) {
			    console.log('e.currentTarget.offsetLeft', e.currentTarget.offsetLeft);
			    this.sliderOffset= e.currentTarget.offsetLeft+50;
			    this.activeIndex= e.currentTarget.id;
				this.theBar=e.currentTarget.id;
			  },
			/*切换筛选*/
			tabShaiClick: function (e) {
			   let id= e.currentTarget.dataset.id;
			   console.log('a当前的id的值',id);
			    let attrList=Array();
			   if(id==1){
				   gyzjModel.prototype.getRegionParent().then(res=>{
					   let result=res.data;
					   for (var i = 0; i < result.length; i++) {
					   	let attr={
					   		'label':result[i].name,
					   		'value':result[i].id,
							'type':1
					   	}
					   	attrList.push(attr);
					   }
				   })
				   
				   this.pickerSingleArray=attrList;
				   this.pickerValueArray = this.pickerSingleArray
				   this.mode = 'selector'
				   this.deepLength = 1
				   this.pickerValueDefault = [0]
				   this.$refs.mpvuePicker.show()
				   console.log('所有的值',this.pickerValueArray);
				   console.log('所有的值',this.mode);
				   console.log('所有的值',this.deepLength);
				   console.log('所有的值',this.pickerValueDefault);
				   console.log('所有的值',this.$refs.mpvuePicker);
			   }else if(id==2){
				   let attrList=Array();
				   gyzjModel.prototype.groupsNameAll().then(res=>{
						let result=res.data;
						for (var i = 0; i < result.length; i++) {
							let attr={
								'label':result[i].typename,
								'value':result[i].id,
								'type':2,
							}
							attrList.push(attr);
						}
						
				   })
				   this.pickerSingleArrayWorker=attrList;
				   this.pickerValueArray = this.pickerSingleArrayWorker
				   this.mode = 'selector'
				   this.deepLength = 1
				   this.pickerValueDefault = [0]
				   this.$refs.mpvuePicker.show()
				   console.log('所有的值',this.pickerValueArray);
				   console.log('所有的值',this.mode);
				   console.log('所有的值',this.deepLength);
				   console.log('所有的值',this.pickerValueDefault);
				   console.log('所有的值',this.$refs.mpvuePicker);
			   }
			   // this.theShaiBar=e.currentTarget.id;
			 },
		}
	}
</script>

<style>
/*新增开始的样式*/
.weui-navbar__title {
	  font-size: 32upx;
	  font-weight: 600;
	  padding:10upx 15upx 0 0;
	}
	.header-tab,.header-shai-tab{
	  width:50%;
	  padding: 0;
	  height: 100upx;
	  line-height: 100upx;
	  border-bottom: 1px solid #ccc;
	}
	.weui-navbar__item{
	  display: inline-block;
	}
	.weui-navbar__title {
	  font-size: 32upx;
	  font-weight: 600;
	  padding:10upx 15upx 0 0;
	}
	.weui-navbar__slider{
	  width: 5.8em;
	}
	.nav_bar_chat{
		height:100upx;
	}
	.header-shai-tab image{
		width:15upx;
		height:10upx;
		align-items:center;
		margin-left: 10upx;
	}
	/*垂直高度*/
	.column-h{
		display:flex;
	/* 	height:30upx; */
		/* margin-top:10upx; */
	}
	.column-h:nth-child(1){
		color:black;
		font-weight:bold;
		font-size:40upx;
		width:200px;
		overflow: hidden;     
		text-overflow: ellipsis; 
		white-space: nowrap; 
	}
	.column-h:nth-child(2){
		width:200px;
		font-size:24upx;
	}
	.column-h view{
		color:white;
		padding:5upx;
		border-radius:10upx;
	}
	.column-h view:nth-child(2){
		background-color:#F77B1E;
	}
	.column-h view:nth-child(1){
		margin-right:30upx;
		background-color:#42B5F0;
	}
	.right_group_box{
		border-bottom:1px solid #ccc;
		width: 95%;
		display: flex;
	}
	/*第2个盒子*/
	.nbr_body .person_text{
		font-size:35upx;
		color:#999;
	}
	/*底部居中的条*/
	.center_bar {
		position: fixed;
		width: 100%;
		height: 100upx;
		bottom: 0;
		z-index: 999;
	}
	.submit-btn {
	  background-color: #f94c48;
	  color: #fff;
	  letter-spacing: 5px;
	}
/*新增的结束样式*/
.search,.search_input {
	width: 100%;
	height: 40px;
	background-color: #CFCFCF;
	display: flex;
	align-items: center;
	position: fixed;
	top:0;
	left:0;
}
.search {
	justify-content:space-around;
}
.search_input {
	justify-content:space-around;
}
.search view, .search_input view {
	height: 28px;
	line-height: 40px;
	background-color: #ffffff;
	border-radius: 5px;
	text-align: center;
	display: flex;
	align-items: center;
}
.search view {
	width: calc(100% - 12px);
	justify-content:center;
}
.search image {
	display: block;
	width: 6%;
	height: 53%;
	margin-right: 5px;
}
.search_input view {
	padding-left: 10px;
}
.search icon,.search_input icon {
	display: inline-block;
	margin: 13px 4px 0 0;
	height: 26px;
	line-height: 26px;
}
.search text {
	font-size: 12px;
	color: #CFCFCF;
}
.search_input view {
	width: 80%;
	text-align: left;
	margin-right: -10px;
}
.search_input text {
	display: inline-block;
	width: 40px;
	height: 30px;
	line-height: 30px;
	font-size: 16px;
	color:#7B68EE;
	text-align: right;
}
.search_input input {
	font-size: 14px;
	width: 90%;
}
.mask {
	background-color: black;
	opacity: 0.4;
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
}
.contain {
	width: 100%;
	height: auto;
	/* margin-top: 40px; */
}
.contain-two {
	width: 100%;
/* 	height: 100upx;
	overflow:hidden; */
	/* margin-top: 40px; */
}
.build_group,.add_group {
	width: 100%;
	height: 45px;
	display: flex;
	align-items: center;
}
.build_group {
	border-bottom: 1px solid rgba(173,185,193,0.5);
}
.build_group image {
	width: 8%;
	height: 50%;
	margin:0 10px 0 10px;
}
.add_group image {
	width: 12%;
	height: 100%;
	margin:0 2px 0 2px;
}
.build_group text,.add_group text {
	font-size:14px;
}
.line {
	width: 100%;
	height: 15px;
	background-color: rgba(173,185,193,0.5);
}
.groupList {
	padding:10upx;
	width: 96%;
	height:120upx;
	/* line-height:120upx; */
	padding-left:2%;
	padding-right:2%;
	display:flex;
}
.groupList:last-child{
	margin-bottom:100px;
}
.nbr_header {
	height: 1px;
	background-color: #D4D4D4;
	line-height: 20px;
	padding-left: 16px;
}
.nbr_body {
	width: 100upx;
	/* height: 100%; */
	
	display: inline-block;
	font-size: 16px;
/* 	line-height: 50px; */
	/* margin-right: 0; */
	margin-right:auto;
	flex-direction: column;
	display:flex;
	/* float: left; */
}
.mask {
	background-color: black;
	opacity: 0.4;
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
}
.edit {
	/* margin: 6px 10px 0 0; */
	width: 80px;
	height: 35px;
	margin-right:30upx;
	background:#4A77D2;
	border-radius:10%;
	align-items:center;
	margin-top:10px;
	color:white;
	line-height:35px;
	text-align:center;
	/* float: right; */
}
.edit image {
	width: 39px;
	height: 39px;
}
.info {
	margin-top: 5px;
	width: 12%;
	height: 40px;
	display: inline-block;
	/* float: left; */
}
.info image {
	width: 68%;
	height: 70%;
	display: inline-block;
	margin: 6px auto auto 6px;
}

</style>
